<template>
  <a-drawer
    v-model:visible="innerVisible"
    class="sl-inside-drawer"
    :mask="false"
    :class="[
      '!absolute !h-auto !top-2 lg:!top-4.5 !bottom-2 lg:!bottom-4.5 !mr-2 lg:!mr-4.5',
      innerVisible ? `!left-2 !w-auto lg:!left-auto ${wClass}` : '',
    ]"
    :get-container="drawerContainerSelector"
    :content-wrapper-style="{ position: 'static', borderRadius: '4px', overflow: 'hidden' }"
    @close="$emit('cancel')"
  >
    <slot />
    <template #footer>
      <a-space :size="16" class="float-right">
        <a-button
          class="!text-xs sm:!text-base"
          @click="
            innerVisible = false;
            $emit('cancel');
          "
          >{{ t("common.cancel") }}</a-button
        >
        <a-button v-if="!hideOkBtn" type="primary" class="!text-xs sm:!text-base" @click="$emit('ok')">
          {{ t("common.ok") }}
        </a-button>
      </a-space>
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { useHomeStore } from "/@/stores/home";
import { useI18n } from "/@/locales/useI18n";

const { t } = useI18n();
const homeStore = useHomeStore();
const props = withDefaults(
  defineProps<{
    visible?: boolean;
    drawerContainerSelector?: string;
    wClass?: string;
    hideOkBtn?: boolean;
  }>(),
  {
    visible: false,
    drawerContainerSelector: "#home-content",
    wClass: "!w-168",
  }
);
const emits = defineEmits(["update:visible", "cancel", "ok", "open"]);
const innerVisible = ref(false);
let isFirstOpen = true;
watch(
  () => props.visible,
  (v) => {
    innerVisible.value = v;
    if (v) {
      emits("open", isFirstOpen);
      isFirstOpen = false;
      homeStore.contentScrollable = false;
    } else {
      homeStore.contentScrollable = true;
    }
  }
);
watch(innerVisible, (v) => {
  emits("update:visible", v);
});
</script>
